<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { onMounted, ref } from 'vue';
import EditorNews from '../../components/EditorNews.vue';
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {newdate} from "../../date/date"
import {CreateNews,GetNewsData,EditNews} from '../../api/news'
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
const newsForm=ref({
    title:"",
    content:"",
    category:1,
    cover:"",
    ispublish:0,
    date:newdate(new Date)
})
const contents=ref("")
//根据id获取信息
const GetNewsDataData=async()=>{
  const res=await GetNewsData(route.query.id)
  newsForm.value=res.data.data
  contents.value=res.data.data.content
  newsForm.value.date=newdate(new Date)
  newsForm.value.ispublish=0 
}
onMounted(()=>{
  if(!route.query.id) return console.log("没有");
  GetNewsDataData()
})
const ruleFormRef=ref()
const rules=({
   title:[
    { required: true, message: '标题没有填写', trigger: 'blur' },
    { min: 1, max: 500, message: '长度在 3 to 500', trigger: 'blur' }
     ],
    content:[
    { required: true, message: '内容不能为空', trigger: 'blur' },
    { min: 1, max: 500, message: '长度在 3 to 500', trigger: 'blur' }
     ],
     cover:[
    { required: true, message: '封面不能为空', trigger: 'blur' },
     ],

})
const options = [
  {
    value: 1,
    label: '最新动态',
  },
    {
    value: 2,
    label: '典型案例',
  },
    {
    value: 3,
    label: '通知公告',
  },
]
// console.log(newsForm.value.category);
const GetContent=(data)=>{
   newsForm.value.content=data
}
const handleChange=async(response)=>{
    console.log(response);
     newsForm.value.cover=response.url  
}
// 创建新闻
const submitForm=()=>{
       ruleFormRef.value.validate(async(valia)=>{
        if(valia){
            const res=await CreateNews(newsForm.value)
            console.log(res.data);
            if(res.data.status==200){
                  ElMessage({
                  message:res.data.massage,
                  type: 'success',
                  })
                  newsForm.value.title=""
                  newsForm.value.content=""
                  newsForm.value.cover=""
                  newsForm.value.category=1
            }else{
                ElMessage.primary('创建新闻失败')
            }
        }else{
            ElMessage.primary('不能为空')
        }
       })
    console.log(newsForm.value);  
}
//编辑新闻
const EditNewsData=async()=>{
   ruleFormRef.value.validate(async(valia)=>{
        if(valia){
            const res=await EditNews(newsForm.value)
            console.log(res.data);
            if(res.data.status==200){
                  ElMessage({
                  message:res.data.massage,
                  type: 'success',
                  })
                  newsForm.value.title=""
                  newsForm.value.content=""
                  newsForm.value.cover=""
                  newsForm.value.category=1
                  router.push('/newslist')
            }else{
                ElMessage.primary('创建新闻失败')
            }
        }else{
            ElMessage.primary('不能为空')
        }
       })
    console.log(newsForm.value);  
}
</script>
<template>
    <div class="newsadd">
         <el-page-header icon="" content="创建新闻" title="新闻管理"></el-page-header>
           <el-card class="card-add" style="max-width: 100%">
                 <el-form
                   ref="ruleFormRef"
                   style="max-width: 100%"
                   :model="newsForm"
                   :rules="rules"
                   label-width="auto"
                 >
                      <el-form-item label="标题" prop="title">
                         <el-input v-model="newsForm.title" />
                      </el-form-item>
                      <el-form-item label="内容" prop="content">
                         <EditorNews @content="GetContent" v-if="contents" :contents="contents"/>
                         <EditorNews @content="GetContent" v-else/>
                      </el-form-item>
                      <el-form-item label="类别" prop="title">
                          <el-select
                            v-model="newsForm.category"
                            placeholder="Select"
                            style="width: 100%"
                           >
                             <el-option
                               v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              ></el-option>
                           </el-select>                            
                      </el-form-item>
                      <el-form-item label="新闻封面" prop="cover">
                         <el-upload
                         class="avatar-uploader"
                         action="http://127.0.0.1:5000/amdin/imags/imag"
                        :on-success="handleChange"
                        :show-file-list="false"
                        >
                        <img v-if="newsForm.cover" :src="newsForm.cover" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
                      </el-form-item>
                <el-form-item class="buttonbox">
                  <el-button type="primary" v-if="!route.query.id" @click="submitForm">
                    添加新闻
                  </el-button>
                  <el-button type="primary" v-else @click="EditNewsData">
                    编辑新闻
                  </el-button>
                  </el-form-item>
                 </el-form>
           </el-card>
    </div>
</template>
<style lang="less" scoped>
.card-add{
    margin-top: 10px;
}
img{
    object-fit: cover;
}
.buttonbox{
    margin-top: 35px;
    margin-left: 70px;
}
// 图片样式
:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
</style>